<template>
    <a-drawer
            title="修改图书"
            :maskClosable="false"
            width=650
            placement="right"
            :closable="false"
            @close="onClose"
            :visible="dictEditVisiable"
            style="height: calc(100% - 55px);overflow: auto;padding-bottom: 53px;">
        <a-form :form="form">
            <a-form-item label='书名' v-bind="formItemLayout">
                <a-input v-decorator="['bookTitle',
                   {rules: [
                    { required: true, message: '不能为空'},
                    { max: 100, message: '长度不能超过100个字符'}
                  ]}]"/>
            </a-form-item>
            <a-form-item label='作者' v-bind="formItemLayout">
                <a-input v-decorator="['bookAuthor',
                   {rules: [
                    { required: true, message: '不能为空'},
                    { max: 100, message: '长度不能超过100个字符'}
                  ]}]"/>
            </a-form-item>
            <a-form-item label='出版社' v-bind="formItemLayout">
                <a-input v-decorator="['publisher',
                   {rules: [
                    { required: true, message: '不能为空'},
                    { max: 100, message: '长度不能超过100个字符'}
                  ]}]"/>
            </a-form-item>
            <a-form-item label='出版年份' v-bind="formItemLayout">
                <a-input-number v-decorator="['yearOfPublication']" style="width: 100%"/>
            </a-form-item>
        </a-form>
        <div class="drawer-bootom-button">
            <a-popconfirm title="确定放弃编辑？" @confirm="onClose" okText="确定" cancelText="取消">
                <a-button style="margin-right: .8rem">取消</a-button>
            </a-popconfirm>
            <a-button @click="handleSubmit" type="primary" :loading="loading">提交</a-button>
        </div>
    </a-drawer>
</template>
<script>
    const formItemLayout = {
        labelCol: { span: 3 },
        wrapperCol: { span: 18 }
    }
    export default {
        name: 'BookEdit',
        props: {
            dictEditVisiable: {
                default: false
            }
        },
        data () {
            return {
                loading: false,
                formItemLayout,
                form: this.$form.createForm(this),
                dict: {}
            }
        },
        methods: {
            reset () {
                this.loading = false
                this.form.resetFields()
            },
            onClose () {
                this.reset()
                this.$emit('close')
            },
            setFormValues ({...dict}) {
                let fields = ['isbn', 'bookTitle', 'bookAuthor', 'publisher', 'yearOfPublication']
                Object.keys(dict).forEach((key) => {
                    if (fields.indexOf(key) !== -1) {
                        this.form.getFieldDecorator(key)
                        let obj = {}
                        obj[key] = dict[key]
                        this.form.setFieldsValue(obj)
                    }
                })
                this.dict.isbn = dict.isbn
            },
            handleSubmit () {
                this.form.validateFields((err, values) => {
                    if (!err) {
                        let dict = this.form.getFieldsValue()

                        dict.isbn = this.dict.isbn
                        this.$formPost('books/updateBook',dict).then((data) => {
                            if(data.status == 1) {
                                    this.reset()
                                    this.$emit('success')
                            } else {
                                this.loading = false
                            }

                        })
                    }
                })
            }
        }
    }
</script>
